<template>
  <div class="m-count-line__item" :style="comItemStyle" :class="comClazz"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";

const props = defineProps({
  width: {
    type: String,
    default: "0",
  },
  color: {
    type: String,
    default: "hotpink",
  },
  round: {
    type: Boolean,
    default: false,
  },
});

const comItemStyle = computed(() => {
  return {
    background: props.color,
    width: props.width,
  };
});

const comClazz = computed(() => {
  return {
    "is-round": props.round,
  };
});
</script>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MCountLineItem",
});
</script>